<template>
  <div class="app-container customer-div">
    <div style="font-size:14px;line-height: 40px;color:#888">根据输入的条件查询出采购毛利评分</div>
    <el-row style="width:900px;">
      <el-col :span="12">
        <div style="border:1px solid #eee;padding:20px;">
          <el-form :model="listQuery" size="mini" label-width="100px" :rules="rules" ref="form">

            <el-form-item label="每吨毛利：" prop="profitAll">
              <el-input v-model="listQuery.profitAll"></el-input>
            </el-form-item>

            <el-form-item label="波动幅度：" prop="diffAmount">
              <el-input v-model="listQuery.diffAmount"></el-input>
            </el-form-item>

            <el-form-item label="类型：" prop="type">
              <el-select v-model="listQuery.type">
                <el-option value="PC" label="PC"></el-option>
                <el-option value="ABS" label="ABS"></el-option>
                <el-option value="PA6" label="PA6"></el-option>
                <el-option value="PA66" label="PA66"></el-option>
                <el-option value="other" label="其他"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                @click="getCountProfit"
                type="primary">
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
      <el-col :span="12">
        <div style="font-size:14px;padding-left:40px;">
          <div style="border:1px solid #eee;padding:20px;height:226px">
            <div style="color:#888;font-size:16px;">查询结果</div>
<!--            <div style="padding-right:20px;line-height:50px;border-bottom:1px solid #eee;margin-top:20px;">比例：<span style="font-weight: bold">{{countProfit.rate}}</span></div>-->
            <div style="line-height:50px;border-bottom:1px solid #eee">评分：<span style="font-weight: bold;font-size:16px;">{{countProfit.score}}</span></div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import {getPurchaseIntegral} from '@/api/partner'
  import store from '@/store'
  import { mapGetters } from 'vuex'
  const defaultListQuery={
    "profitAll": '',
    "diffAmount" : "",
    "type" : '',
  };
  export default {
    name: "index",
    data(){
      return {
        listQuery: JSON.parse(JSON.stringify(defaultListQuery)),
        countProfit:'',
        rules:{
          profitAll:[{required: true, trigger: 'blur' ,message: '此项必填',}],
          diffAmount:[{required: true, trigger: 'blur' ,message: '此项必填',}],
          type:[{required: true, trigger: 'change' ,message: '此项必填',}],
        }
      }
    },
    computed: {
      ...mapGetters([
        'name',
        'mobile',
        'userId'
      ]),
    },
    created() {

    },
    filters: {

    },
    methods:{
      getCountProfit(){
        this.$refs.form.validate((valid) => {
          if (valid) {
            let data = {};
            data.profitAll = this.listQuery.profitAll;
            data.diffAmount = this.listQuery.diffAmount;
            data.type = this.listQuery.type
            getPurchaseIntegral(data).then((res)=>{
              this.countProfit = res;
            })
          }
        })
      },
    },
  }
</script>
